{% extends "admin/pub/base.html" %}

{% block title %}
<title>商品添加</title>
{% endblock %}


{% block content-body %}

<div class="widget am-cf">
  <div class="widget-head am-cf">
    <div class="widget-title  am-cf"> 商品添加

<div class="widget-body am-fr">
  <form class="am-form tpl-form-border-form tpl-form-border-br am-u-sm-12 " method="post" action="{% url 'goods_insert' %}" enctype="multipart/form-data">
    {% csrf_token %}
    <div class="am-form-group">

      <div class="am-form-group">
        <label for="user-name" class="am-u-sm-3 am-form-label">所属分类</label>
        <select name="pid" data-am-selected="{btnSize: 'am'}" style="display: none;">
          {% for i in db %}
            {% if i.pid == 0 %}
            <option value="{{ i.id }}" disabled>{{ i.name }}</option>
            {% else %}
            <option value="{{ i.id }}">{{ i.name }}</option>
            {% endif %}
          {% endfor %}

      </select>
      </div>


      <label for="user-name" class="am-u-sm-3 am-form-label">
        <font style="vertical-align: inherit;">
          <font style="vertical-align: inherit;">商品标题</font></font>
      </label>
      <div class="am-u-sm-9">
        <input type="text" class="tpl-form-input" name="title" placeholder="请输入商品标题"><br>
      </div>
      <label for="user-name" class="am-u-sm-3 am-form-label">
        <font style="vertical-align: inherit;">
          <font style="vertical-align: inherit;">商品价格</font></font>
      </label>
      <div class="am-u-sm-9">
        <input type="text" class="tpl-form-input" name="price" placeholder="请输入价格"><br>
      </div>

      <label for="user-name" class="am-u-sm-3 am-form-label">
        <font style="vertical-align: inherit;">
          <font style="vertical-align: inherit;">商品库存</font></font>
      </label>
      <div class="am-u-sm-9">
        <input type="text" class="tpl-form-input" name="storage" placeholder="请输入库存"><br>
      </div>

      <label for="user-name" class="am-u-sm-3 am-form-label">
        <font style="vertical-align: inherit;">
          <font style="vertical-align: inherit;">商品图片</font></font>
      </label>
      <div class="am-u-sm-9">
        <input type="file" name="pic" id="picture"> <br>
        <img width="250" src="" alt="" id="img1"><br><br>

      </div>

      <div class="am-u-sm-12 am-u-sm-offset-3">
        <label for="user-name" class="am-u-sm-3 am-form-label">
          <font style="vertical-align: inherit;">
            <font style="vertical-align: inherit;">商品信息</font></font>
        </label>
        <div class="am-u-sm-9">
            <link rel="stylesheet" type="text/css" href="/ueditor/UE/third-party/SyntaxHighlighter/shCoreDefault.css">
            <script type="text/javascript" src="/ueditor/UE/third-party/SyntaxHighlighter/shCore.js"></script>
            <script type="text/javascript" src="/ueditor/UE/ueditor.config.js"></script>
            <script type="text/javascript" src="/ueditor/UE/ueditor.all.min.js"></script>
            <script type="text/javascript" src="/ueditor/UE/lang/zh-cn/zh-cn.js"></script>
            <script id="editor" name="info" type="text/plain" style="height:600px;color:blue"></script>

            <script type="text/javascript">
                var ue = UE.getEditor('editor');
                SyntaxHighlighter.all();
            </script><br>
        </div>

        <div class="am-form-group">
            <div class="am-u-sm-9 am-u-sm-push-3">
            <button class="am-btn am-btn-primary tpl-btn-bg-color-success ">提交</button>
            </div>
        </div>

     </div>
    </div>
  </form>
</div>

    </div>
  </div>
</div>
{% endblock %}

{% block img_js %}
    <script>
        $(document).ready(function(){
            $('#picture').change(function(){
                var pic1 = this.files[0];
                preview_picture(pic1);
            });
        });
        function preview_picture(pic){
            var r = new FileReader();
            r.readAsDataURL(pic);
            r.onload = function(e){
                $('#img1').attr('src',this.result).show();
            };
        }
    </script>
{% endblock %}